<template>
  <FormItem v-bind="formItemProps" :rules="computeRules" :disabled="inputDisabled">
    <template #default>
      <ElInput
        :class="{ 'is-readonly': readonly }"
        :value="value"
        :readonly="readonly"
        :maxlength="maxLength"
        :disabled="inputDisabled"
        :placeholder="computePlaceholder"
        v-bind="inputProps"
        v-on="listeners"
        @input="val => $emit('input', val)" />
      <div v-if="$slots.warn" class="el-form-item__error">
        <slot name="warn"></slot>
      </div>
    </template>
    <template #error="{ error }">
      <div v-if="$scopedSlots.error && $scopedSlots.error(error)" class="el-form-item__error">
        <slot name="error" :error="error">{{ error }}</slot>
      </div>
    </template>
    <template #label>
      <slot name="label"></slot>
    </template>
  </FormItem>
</template>

<script>
  import formInput from './form-input'
  import { validateIdCard } from '@web-utils/core'
  import { Input } from 'element-ui'
  import { filterProperties, normalizeProps } from '@/util'

  const autoBindKeys = Object.keys(Input.props).filter(key => !['value', 'placeholder', 'disabled'].includes(key))

  export default {
    name: 'FormInputIdCard',
    mixins: [formInput],
    props: {
      value: String,
      maxLength: {
        type: String,
        default: '200'
      }
    },
    computed: {
      inputProps() {
        return filterProperties({ ...normalizeProps(this.$attrs), ...this.$props }, autoBindKeys)
      }
    },
    methods: {
      validateIdCard,
      getRules() {
        return [
          {
            validator: validateIdCard,
            message: '请输入正确的身份证号码！'
          }
        ]
      }
    }
  }
</script>
